<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- a,1 创建页面结构 -->
    <div id="app">
        <!-- a.3 -->
        <router-link to="/">主页</router-link>
        <router-link to="/product">产品</router-link>
        <!-- a.4 路由的出口 -->
        <router-view></router-view>
    </div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
    //定义子组件 a5
    const Home = {
        template: `<div>主页</div>`
    }
    const Product ={
        template:`<div>产品</div>`
    }
    //a.6 定义组件对应的关系
    //注意routes 名字不能改
    const routes = [
        {
            path:"/",
            component:Home
        },
        {
            path:"/product",
            component:Product
        }
    ]
    //a,7 VueRouter真正的跟路由
    let router = new VueRouter({
        routes
    })
    //a2, 创建一个实例
    let vm = new Vue({
        //8,作为配合传入到vue实例中
        router,
        el:"#app"
    })
</script>
</html>